<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>
        点击
    </button>
    <button onclick="del()">删除</button>
    <script>
        // 变量是存在内存中的
        let  a = Number(localStorage.getItem('namea'))
        
        let b = Number(sessionStorage.getItem('nameb'))
        let button = document.querySelector('button')
        button.onclick = function(){
            a+=1
            b+=1
            console.log(a,'a');
            console.log(b,'b');

            // 存储缓存 一直存在 缓存名称，值
            localStorage.setItem('namea',a)

            // 会话存储 当会话结束后会将数据移除(关闭标签后执行)
            sessionStorage.setItem('nameb',b)
            
        }
        // 缓存的数据是在硬盘
        // 获取缓存中的数据              缓存名称
        console.log(localStorage.getItem('namea'));

        // 缓存的数据格式是字符串格式

        // 存储对象或数组就会出问题
        sessionStorage.setItem('obj',{name:'张三',age:5})
        console.log(sessionStorage.getItem('obj'));
        
        function del(){
            // 删除缓存
            localStorage.removeItem('namea')
        }

        
        
    </script>
</body>
</html>